<!-- 审核费用 -->
<template>
  <div class="examine-task">
    <!-- 顶部标题栏组件 -->
    <top-header :leftArrow="leftArrow"></top-header>
    <!-- 审核列表内容 -->
    <van-cell-group>
      <van-cell v-for="(item, index) in depList" :key="item.id">
        <!-- 每列的上层 -->
        <template #title>
          <div class="van-title" @click="toDetail(item)">
            <div class="van-top">
              <van-tag plain type="primary" color="burlywood">{{ index + 1 }}</van-tag>
              <span class="custom-title">{{ item.approvalDate | filterTime }}</span>
              <van-tag plain type="primary" color="burlywood" @click.stop="onSubmit(item)"
                v-if="item.CFA_State !== 2 && item.result">审核</van-tag>
            </div>
            <span class="cust-title">{{ item.approvalName }}</span>
          </div>
        </template>
        <!-- 每列的下层 -->
        <template #label>
          <span class="custom-title">{{ item.receiptNumber }}</span>
          <van-steps :active="item.CFA_State" :active-icon="item.result ? 'success' : 'cross'" active-color="burlywood">
            <van-step>
              <van-button size="mini" style="border:none">提交申请</van-button>
            </van-step>
            <van-step>
              <van-button size="mini" style="border:none" @click="click1(index)">领导审核</van-button>
            </van-step>
          </van-steps>
          <!-- 隐藏的审核意见 -->
          <van-cell v-if="onShow1 == index" title="部门审核：" :value="item.depComment" />
          <!-- <van-cell v-if="onShow2 == index" title="公司审核：" :value="item.comComment" />
          <van-cell v-if="onShow3 == index" title="财务审核：" :value="item.finComment" /> -->
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 审核弹出层 -->
    <van-popup v-model="showCost" position="bottom">
      <van-field v-model="examine.depComment" label="审核意见:" name="depComment" />
      <van-field name="checkbox" label="审核结果">
        <template #input>
          <van-checkbox v-model="examine.depResult" shape="square" checked-color="burlywood" />
        </template>
      </van-field>
      <div class="task-btn">
        <van-button type="info" size="small" block color="burlywood" @click="onSubmit1">提交审核</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { TopHeader } from '@/components'
import { getDepApproval, costDepartments } from '@/request/api'
export default {
  name: 'ExamineTask',
  components: {
    TopHeader
  },
  filters: {
    filterTime (val) {
      return val.slice(0, 10)
    }
  },
  data () {
    return {
      leftArrow: true, // 顶部标题栏组件是否有返回按钮
      depList: [],
      power: sessionStorage.getItem('power'), // 用户权限
      showCost: false,
      examine: {
        depComment: '同意',
        depResult: false
      },
      approvalFormId: null, // 审核id
      onShow1: -1
    }
  },
  created () {
    this.getDepList()
  },
  methods: {
    // 领导审核按键点击事件触发
    click1 (index) {
      if (this.depList[index].depComment) {
        this.onShow1 = index
      }
    },
    // 获取提交审核数据
    getDepList () {
      if (this.power === '部门审核人') {
        getDepApproval().then(res => {
          if (res.Tag === 1) {
            console.log(res)
            this.depList = res.Data
          }
        })
      }
    },
    // 跳转到详情页
    toDetail (value) {
      console.log('跳转到详情页', value)
      sessionStorage.setItem('approvalFormId', value.id)
      this.$router.push({ path: '/examineDetail' })
    },
    // 点击审核事件
    onSubmit (value) {
      console.log(value)
      this.approvalFormId = value.id
      this.showCost = true
    },
    // 点击提交事件
    onSubmit1 (value) {
      this.$dialog.confirm({
        title: '提示',
        message: '您确定要提交吗?',
        confirmButtonColor: 'burlywood'
      }).then(() => {
        const param = {
          approvalFormId: this.approvalFormId,
          depComment: this.examine.depComment,
          depResult: this.examine.depResult,
          approver: sessionStorage.getItem('userId')
        }
        console.log(param)
        costDepartments(param).then(res => {
          console.log(res)
          if (res.Tag === 1) {
            this.showCost = false
            this.$toast('已提交成功')
            this.getDepList()
          }
        })
      }).catch(() => { })
    }
  }
}
</script>

<style scoped lang="less">
.examine-task {
  width: 100%;
  height: 100%;
  .van-cell-group {
    height: calc(100% - 1.2rem);
    background: inherit;
    overflow: auto;
    &::after {
      border: none;
    }
    .van-cell {
      .van-cell__title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .van-steps {
          padding: 0;
          /deep/ .van-steps__items {
            margin: 0;
          }
        }
        .van-title {
          display: flex;
          .van-top {
            flex: 1;
            display: flex;
            align-items: center;
          }
          .cust-title {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: right;
          }
        }
        .van-tag {
          margin: 0 2px;
        }
        .van-cell__label {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: pre-line;
          .van-cell {
            .van-cell__value {
              flex: 2;
              text-align: left;
            }
          }
        }
      }
    }
  }
  .task-btn {
    margin: 0.4rem;
    display: flex;
  }
}
</style>
